import { createVNode, render } from 'vue'
import WxAlert from './WxAlert.vue'
import type { optionsType } from './alert.type'

const mountAlert = (opts: optionsType) => {
  const len = document.querySelectorAll('.wx-alert').length
  const newOpts = {...opts, top: (len + 1) * 50 + 'px'}
  const container = document.createElement('div')
  const instance = createVNode(WxAlert, newOpts)
  instance.props!.onDestroy = () => {
    container.remove()
  }
  render(instance, container)
  document.body.appendChild(container)
}

export const Alter = {
  info(options: optionsType) {
    return mountAlert({...options, type: 'info'})
  },
  success(options: optionsType) {
    return mountAlert({...options, type: 'success'})
  },
  warning(options: optionsType) {
    return mountAlert({...options, type: 'warning'})
  },
  error(options: optionsType) {
    return mountAlert({...options, type: 'error'})
  }
}